<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>g-dialog 测试实例</title>
<script src="../node_modules/vue/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="../node_modules/element-plus/dist/index.css">
<script src="../node_modules/element-plus/dist/index.full.min.js"></script>
<script src="../dist/g-dialog-all.umd.js"></script>
<link rel="stylesheet" href="../dist/g-dialog-all.css" />
</head>
<body>
<div id="app">
  <div>
    <el-input
      placeholder="请输入内容"
      v-model="inputText"
    />
  </div>
  <div>
    <el-button
      type="primary"
      @click="openDialog"
    >
    打开对话框
    </el-button>
    <el-button
      type="primary"
      @click="openDrawer"
    >
      打开抽屉
    </el-button>
  </div> 
  
  <!-- 确保 ref 名称与 JavaScript 中使用的名称一致 -->
  <character-dialog
    :ref="setDialogRef"
    @character-selected="onCharacterSelected"
  />
  
  <!-- 延迟渲染 drawer 组件 -->
  <character-drawer
  :key="key"
    v-if="showDrawer"
    ref="setDrawerRef"
    @character-selected="onCharacterSelected1"
  />
</div>

<script>
  const { createApp, ref, onMounted, nextTick } = Vue;
  const { CharacterDialog, CharacterDrawer } = window.GDialog; 
  const { ElMessage } = ElementPlus;
  console.log('Component comparison:');
  console.log('Dialog keys:', Object.keys(CharacterDialog));
  console.log('Drawer keys:', Object.keys(CharacterDrawer));
  
  console.log('Dialog setup:', CharacterDialog.setup.toString());
  console.log('Drawer setup:', CharacterDrawer.setup.toString());
  const App = {
    setup() {
      // 响应式数据
       const inputText = ref('');
      const componentRefs = ref({
        dialog: null,
        drawer: null
      });
      
      const key = ref(0); // 用于强制刷新
	  const showDrawer= ref(false);
      
      // 设置 ref 的函数
      const setDialogRef = (el) => {
        console.log('Dialog ref set:', el);
        componentRefs.value.dialog = el;
      };
      
      const setDrawerRef = (el) => {
        console.log('Drawer ref set:', el);
        componentRefs.value.drawer = el;
      };
      
      // 事件处理函数
      const onCharacterSelected = (char) => {
        ElMessage.success(`你选择了${char}`);
      };
      
      const onCharacterSelected1 = (char) => {
        ElMessage.success(`你选择了${char}`);
      };
      
      // 打开对话框
      const openDialog = () => {
        console.log('Opening dialog, refs:', componentRefs.value);
        if (componentRefs.value.dialog && typeof componentRefs.value.dialog.openDialog === 'function') {
          componentRefs.value.dialog.openDialog();
        } else {
          ElMessage.error('Dialog 组件引用不存在或方法不可用');
        }
      };
      
      // 打开抽屉
      const openDrawer = () => {
		showDrawer.value = true;
        console.log('Opening drawer, refs:', componentRefs.value);
        if (componentRefs.value.drawer && typeof componentRefs.value.drawer.openDialog === 'function') {
          componentRefs.value.drawer.openDialog();
        } else {
          ElMessage.error('Drawer 组件引用不存在或方法不可用');
        }
      };
      
      // 生命周期钩子
      onMounted(async () => {
        console.log('Component mounted');
        await nextTick();
        console.log('Initial refs state:', componentRefs.value);
        
        // 如果 drawer 仍然是 null，强制刷新
        if (!componentRefs.value.drawer) {
          console.log('Drawer is null, forcing refresh...');
          setTimeout(() => {
            key.value++;
          }, 100);
        }
      });
      
      // 暴露给模板的数据和方法
      return {
        inputText,
        setDialogRef,
        setDrawerRef,
        onCharacterSelected,
        onCharacterSelected1,
        openDialog,
        openDrawer
      };
    }
  };
  
  // 创建并挂载应用
  const app = createApp(App);
  
  app.use(ElementPlus)
    .component('character-dialog', CharacterDialog)
    .component('character-drawer', CharacterDrawer);
  
  app.mount('#app');
</script>
</body>
</html>